<template>
    <div class="goods-list">
        <dl>
            <dd v-for="(good, item) in goods" :key="good.index" v-show="item < showGoods">
                <img :src="good.imagess"/>
                <section class="pl10 tl">
                    <h1>{{good.nam}}</h1>
                    <p>{{good.selectGuige}}</p>
                </section>
                <section class="tr" style="flex: 1;">
                    <h1><span>￥</span>{{good.originalprice}}</h1>
                    <p><span>x</span>{{good.counts}}</p>
                </section>
            </dd>
        </dl>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'list-goods',
        props: {
            goods: Array
        },
        data () {
            return {
                showGoods: 3
            };
        }
    };
</script>

<style lang="stylus" scoped>
    .goods-list
      color #A5A5A5;
      dl
        padding 0 13px;
        dd
            display flex; border-bottom 1px solid #E9E9E9; padding 10px 0;
            img
                width 50px;height 50px;
            section
                h1
                    font-size 14px; color #525252;
                    span
                        font-size 9px;
                p
                    margin-top 8px; font-size 12px; color #A2A2A2;
                    span
                        font-size 9px;
</style>
